#{extends 'main.html' /}

<div class="page">
    <header class="bar bar-nav0">
        <a href="#" class="title">美臻中国<i class="iconfont">&#xe60d;</i></a>
    </header>
    <section id="page-swiper" class="content scroll_y" style=" top:0; padding-bottom:3rem;">
        <div class="swiper-container lunbo" data-space-between='0'>
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="/public/images/banner.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/public/images/banner1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/public/images/banner2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/public/images/banner3.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="mainnav m5">
            <!--href="/accesscard/index"-->
            <a href="#"><i class="ma0 iconfont">&#xe61d;</i><em>客户联络</em></a>
            <a href="/issue/repairList"  class="external"><i class="ma1 external iconfont">&#xe643;</i><em>报修</em></a>
            <a href="/issue/publicRepairList"  class="external"><i class="ma2 external iconfont">&#xe6eb;</i><em>公共区域报修</em></a>
            <a id="bind-access-card" href="#" class="external"><i class="ma3 external iconfont">&#xe652;</i><em>绑定门禁卡</em></a>
            <a href="/payment/index"  class="external"><i class="ma4 external iconfont">&#xe6ab;</i><em>缴费记录</em></a>
            <a href="#"><i class="ma5 iconfont">&#xe635;</i><em>增值服务</em></a>

            <!--<a id="bind-access-card" href="#" class="external"><i class="ma0 external iconfont">&#xe652;</i><em>绑定门禁卡</em></a>
            <a href="/issue/index/REPAIR"  class="external"><i class="ma1 external iconfont">&#xe643;</i><em>添加报修</em></a>
            <a href="/issue/index/COMPLAINT"  class="external"><i class="ma2 external iconfont">&#xe6eb;</i><em>公共区域报修</em></a>
            <a href="/bankcard/index"  class="external"><i class="ma3 external iconfont">&#xe6b4;</i><em>绑定银行卡</em></a>
            <a href="/payment/index"  class="external"><i class="ma4 external iconfont">&#xe6ab;</i><em>缴费记录</em></a>
            <a href="/workorder/index"  class="external"><i class="ma5 external iconfont">&#xe6ff;</i><em>工单管理</em></a>-->
        </div>

        <div class="card0 m5">
            <div class="card-header"><h3>最新缴费记录</h3></div>
            <div class="card-content list-block">
                <ul id="index-bill-status">
                #{list bills , as :'bill'}
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">${bill?.title}<span>${bill?.paymentStatus}</span></div>
                            <div class="item-after">¥&nbsp;${bill?.amount}</div>
                        </div>
                    </li>
                #{/list}
                </ul>
            </div>
        </div>


        <div class="adpic m5">
            <a href="#"><img src="/public/images/pic.jpg"/></a>
        </div>
    </section>

#{include 'weixin/footer.html'/}


</div>

<script type="text/javascript">
    $(function () {
        $(document).on("click", "#bind-access-card", function(){
//            wx.scanQRCode({
//                desc: 'scanQRCode desc',
//                needResult: 0,
//                scanType: ["qrCode"]
//                //,success: function (res) {var result = res.resultStr;}
//            });
            $.toast('请使用微信扫一扫，扫描门禁卡上的二维码');
        });
        var error="${flash['error']}";
        if(error) $.toast(error);

        var dic = {"NOT_PAID":"<span style='color:goldenrod'>&nbsp;&nbsp;[未支付]</span>", "SUCCESS":"<span style='color:green'>&nbsp;&nbsp;[已支付]</span>", "FAILURE":"<span style='color:red'>&nbsp;&nbsp;[支付失败]</span>"}
        $("#index-bill-status").find("span").each(function(){
            $(this).html(eval("dic."+$(this).html()));
        });
    })
    $.init();
    $(".lunbo").swiper({
        autoplay: 3000  //可选选项，自动滑动
    });

    // 检测高度

    $(".content").on("scroll",function(){
        if($('.content').scrollTop() > 100){
            $('.bar-nav0').addClass("active");
        }else {
            $('.bar-nav0').removeClass("active");
        }
    });
    function goToRepair() {

    }

</script>